import React from 'react';
import 'rc-tabs/assets/index.css';
import { isEqual, isEmpty } from 'lodash';
import Menu, {SubMenu, MenuItem} from 'rc-menu';
import './Tabstyle_4.css'
import Tabs, { TabPane } from 'rc-tabs';
import TabContent from 'rc-tabs/lib/TabContent';
import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';

class TabStyle_4 extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            tabid: props.datas.currentTab,
            rcMenuLoaded : false,
            tabIndex:0,
            datas:props.datas
        }
        this.handleTabData = this.handleTabData.bind(this);
    }

    handleTabData(tabid,index){
        const { datas={} } = this.state;
        const { handleTabData={},titles=[] } = datas;
        handleTabData(tabid);
        this.setState({
            tabid: tabid,
            tabIndex:index
        });
    }

    componentWillReceiveProps(nextProps){
        const { tabid } = this.state;
        if(!isEqual(tabid, nextProps.datas)){
            this.setState({
                tabid: nextProps.datas.currentTab,
                datas:nextProps.datas
            })
        }
    }

    componentWillMount(){
        loadjs.isDefined("rc-menu") ? loadjs.ready('rc-menu',()=>{
            this.setState({rcMenuLoaded:true})
        }) : loadjs(['/cloudstore/resource/pc/rc-menu/rc-menu.js','/cloudstore/resource/pc/rc-menu/rc-menu.css'],'rc-menu',()=>{
            this.setState({rcMenuLoaded:true})
        })
    }

    render(){
        const {  fontStyle, ebaseid = '' } = this.props;
        const { datas={}}=this.state;
        const { tabid,tabIndex } = this.state;

        const { config={} }=datas;

        const { currentTab, tabids = [], titles = [],
            methodvalue,counts, isShowSettingShowType='0',tabstyle, tabvalue} = datas;
        let tabwidth=datas.tabwidth;
        if(parseInt(tabwidth)>44){
            tabwidth=tabwidth-44;
        }
        const { item={} } = config;
        const { eid=''}=item;
        const { header={} } = item;
        const {rcMenuLoaded} = this.state
        if(!rcMenuLoaded){return null;}

        if(methodvalue==2){
            setTimeout(function () {
                titles.map((title, i)=> {
                    $("."+eid+"_tab_"+i+" .titleDiv").width("auto");
                    let titleWidth=$("."+eid+"_tab_"+i+" .titleDiv").width();
                    $("."+eid+"_tab_"+i).width(titleWidth)
                })
            },0)
        }else{
            setTimeout(function () {
                titles.map((title, i)=> {
                    $("."+eid+"_tab_"+i).width(tabwidth);
                    $("."+eid+"_tab_"+i+" .titleDiv").width(tabwidth);
                })
            },100)
        }
        if(isEmpty(datas)) return <div/>;
        const tdStyle={width: 'auto', verticalAlign: 'top',backgroundSize: '100% 100%', height: '44px', lineHeight: '44px', paddingTop: '0px',padding:'0px 0px'};
        const tdStyle1={width: 'auto', marginRight: '10px', verticalAlign: 'top',backgroundSize: '100% 100%', height: '44px', lineHeight: '44px', paddingTop: '0px'};
        let style = {marginLeft: '10px', marginRight: '10px',display:'inline-block'};
        let style1 = {width: tabwidth + 'px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', display: 'inline-block'};
        let titleStyle = {width: '100%'};
        let titleStyle1 = { overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis',color:'#ffffff'};
        if(methodvalue==2){
            titleStyle1={color:'#ffffff'}
        }
        let style2 = {display:'inline-block'};
        let tabLeftStyle={display:'none',width:'15px',backgroundColor:'#00A9FF',height:'44px',lineHeight:'44px'}
        let tabWidthStyle={width:'86px',overflow:'hidden',textOverflow:'ellipsis',whiteSpace: 'nowrap',paddingLeft:'10px'}

        const cbtdStyle={width:'102px',height:'56px',top:'-5px' };
        const cbtdStyle1={width:'102px',height:'56px',top:'-5px'};

        let cbstyle = {height:'42px',width:'100px'};
        let cbstyle1 = {width: '100px',height:'42px'};

        let tHtml_new = (
            <div className="commonTab style_4_Tab">
                <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@rilo3y`}
                    activeKey={tabid}
                    renderTabBar={()=><ScrollableInkTabBar ecId={`${this && this.props && this.props.ecId || ''}_ScrollableInkTabBar@4g7ioj`} />}
                    renderTabContent={()=><TabContent ecId={`${this && this.props && this.props.ecId || ''}_TabContent@9ldita`} />}
                    className="tabcontainer tab2"
                    style={titleStyle}
                >

                    {
                        titles.map((title, i)=> {
                            if ((ebaseid == '8') && counts && counts[i] !== -1 && counts[i] !== '' && counts[i] !== null) {
                                if(counts[i] > 99){
                                    title +='(99+)';
                                }else {
                                    title +=' (' + counts[i] + ')';
                                }
                            }else if (ebaseid == 'blogStatus' &&
                                counts && '0'!== counts[i]) {
                                title += ' (' + counts[i] + ')';

                            }else if(ebaseid == '7_DY'&& counts && '0'!== counts[i]){
                                title += ' (' + counts[i].noReadNum + ')';
                            }else if(isShowSettingShowType == '1' && ebaseid == '7'&& counts && counts[i] && counts[i].noReadNum){
                                title += ' (' + counts[i].noReadNum + ')';
                            }else if(ebaseid == '7'&& counts && counts[i] && counts[i].isHaveNoRead && counts[i].isHaveNoRead == '1'){
                                title =  title;
                            }
                            //let zIndex=titles.length-i;
                            let zIndex=titles.length-i;
                            if(tabIndex>i){
                                zIndex=i;
                            }else if(tabIndex<i){
                                zIndex=titles.length-i;
                            }else if(tabIndex==i){
                                zIndex=titles.length+1;
                            }
                            const className = tabids[i] == tabid ? `tab2selected wea-f${fontStyle.tab1fontsize || 1} ${eid}_tab_${i} tab4_div count_${i%4}` : `tab2unselected wea-f${fontStyle.tab2fontsize || 1} ${eid}_tab_${i} tab4_div count_${i%4}`;
                            const pointClassName = ebaseid == '7'&& counts && counts[i] && counts[i].isHaveNoRead && counts[i].isHaveNoRead == '1' ? 'portal-new-unreadpoint' : '';
                            return<TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@i6earx@${tabids[i]}`} key={tabids[i]} style={{width: '200px',zIndex:zIndex}}
                                        tab={<div
                                                className={className}
                                                style={{height:'54px',zIndex:zIndex}}
                                                data-tabid={tabids[i]}
                                                onClick={() => this.handleTabData(tabids[i],i)}
                                                >
                                                    <div className={"titleDiv "} style={titleStyle1} title={title}>
                                                        {title}
                                                    </div>
                                                    <div className={pointClassName}></div>
                                                </div>}>
                                    </TabPane>
                        })
                    }
                </Tabs>
        </div>
    )
        return tHtml_new;
    }
}
export default TabStyle_4;